<template>
  <div class="guarantee-contail">
    <van-nav-bar class="header"
                 title="事故报修"
                 left-arrow
                 @click-left="goBack()">
      <van-icon name="edit-data"
                slot="right"
                @click="goPage('/guarantee/add')" />
    </van-nav-bar>
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh">
      <div class="fengniao-tip"
           v-if="tip">暂时没有数据</div>
      <van-list v-model=" loading "
                :finished="finished "
                @load="onLoad ">
        <div v-for="(item,index) in list"
             :key="index"
             @click.stop="detail(item,index)"
             class="fengniao-list">
          <div class="fengniao-content item">
            <p class="header">
              <span class="title"
                    v-text="item.description"></span>
              <el-tag type="info"
                      size="small">{{item.statusName}}</el-tag>
            </p>
            <span class="date"
                  v-text="item.startTime"></span>
            &nbsp; &nbsp;
            <div class="menu">
              <div class="btn fengniao-color">
                <el-button type="danger"
                           size="mini"
                           @click.stop="del(item,index)">删除</el-button>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>

import { mapGetters } from 'vuex';
import { getList, delObj } from '@/api/guarantee/index';
import { validatenull } from '@/util/validate';
import baseCommon from '@/mixins/common';
import filterCommon from '@/mixins/filter';

export default {
  name: 'guaranteeContail',
  mixins: [baseCommon(), filterCommon()],
  data() {
    return {
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      tip: false,
      page: {
        total: 0,
        userId: undefined,
        page: 1,
        limit: 10,
      },
    };
  },
  created() {
    this.page.userId = this.userInfo.userId;
  },
  mounted() { },
  computed: {
    ...mapGetters(['userInfo', 'isWuye']),
  },
  methods: {
    detail(item) {
      this.goPage('/guarantee/detail', '', {
        id: item.id,
      });
    },
    del(item, index) {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否删除',
        })
        .then(() => delObj(item.id))
        .then(() => {
          this.list.splice(index, 1);
          this.$message.success({
            message: '删除成功',
            duration: 1500,
          });
        });
    },
    onRefresh() {
      this.tip = false;
      this.page.page = 1;
      getList(this.page).then((res) => {
        const data = res.data;
        this.page.total = data.total;
        this.list = data.records;
        this.isLoading = false;
        this.finished = false;
        this.onLoad();
      });
    },
    onLoad() {
      this.tip = false;
      getList(this.page).then((res) => {
        this.setPage(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

